<template>
    <div>
        <div class="toolbar">
            <el-select
                v-model="shopTypeId"
                @change="$store.dispatch('getShopList',{shopTypeId})"
            >
                <el-option
                    v-for="item in $store.state.shop.allShopTypeList"
                    :key="item._id"
                    :value="item._id"
                    :label="item.shopTypeName"
                ></el-option>
            </el-select>
            <el-button type="success" @click="isShopType=true">添加部门</el-button>
            <el-button type="success" @click="shopListVisible=true">添加组</el-button>
        </div>


        <el-table
                v-loading="$store.state.isLoading"
                :border="true"
                :data="$store.state.shop.shopList"
                style="width: 100%">
            <el-table-column label="ID" width="250">
                <template slot-scope="scope">
                    {{scope.row._id}}
                </template>
            </el-table-column>
            <el-table-column
                    label="上传日期"
                    width="200">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.createTime | date }}</span>
                </template>
            </el-table-column>

            <el-table-column label="组名称">
                <template slot-scope="scope">
                    {{scope.row.shopName}}
                </template>
            </el-table-column>

            <el-table-column label="部门名称">
                <template slot-scope="scope">
                    {{scope.row.shopTypeName}}
                </template>
            </el-table-column>

            <el-table-column label="组图片">
                <template slot-scope="scope">
                    <img :src="'/ele/'+scope.row.shopPic" alt="" width="150px">
                </template>
            </el-table-column>



            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="success"
                               @click="shopId=scope.row._id;
                shopTypeDialog=scope.row.shopTypeId;
                goodsTypeVisible=true" >添加职位</el-button>
                    <el-button size="mini" type="danger" @click="deleteOne(scope.row._id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <PageInfo :query="{shopTypeId}" actions-name="getShopList"></PageInfo>
        <!--这里的v-if有清空表单里面的内容的作用-->
        <ShopListDialog v-if="shopListVisible" :shop-list-visible.sync="shopListVisible"></ShopListDialog>
        <ShopTypeDialog v-if="isShopType" :visible.sync="isShopType"></ShopTypeDialog>
        <GoodsTypeDialog :shop-id="shopId" :shop-type-id="shopTypeDialog" v-if="goodsTypeVisible" :visible.sync="goodsTypeVisible"></GoodsTypeDialog>
    </div>

</template>

<script>
    export default {
        name: "ShopList",
        data(){
            return{
                shopListVisible:false,
                goodsTypeVisible:false,
                isShopType:false,
                shopTypeId:"",
                shopId:""
            }

        },
        created(){
            // console.log(2222222,this.$route.params.shopTypeId);
            //在create里面写是因为分页组件是本组件的一个子组件，他会先执行子组件里面的mounted在执行本组件里面的mounted，所以要在创建本实例话之后执行
            if(this.$route.params.shopTypeId)
                this.shopTypeId = this.$route.params.shopTypeId
        },
        mounted(){
            // console.log(this.$store.state.shop.shopList)
            if(this.$store.state.shop.allShopTypeList.length<1)
                this.$store.dispatch("getAllShopTypeList")
        },
        methods:{
            async deleteOne(id){
                const path = this.$route.path
                const data = await this.$store.dispatch("deleteOneById",{id,path})
                if(data.ok ===1)
                    this.$store.dispatch("getShopList")
            },

        }
    }
</script>

<style scoped>

</style>